<template>
  <div class="box">
    <!-- 头部区域 -->
    <div class="header">
      <!-- 搜索框区域 -->
      <div class="select">
        <!-- 定位 -->
        <div class="location">
          <img src="../../images/indexNav/Frame (1).png" alt="" />
          <span>枫杨</span>
        </div>
        <!-- 搜索框 -->
        <input type="text" value="椅子办公" />
        <img src="../../images/indexNav/fangdajing.png" alt="" />
        <!-- 橙信币 -->
        <div class="coin">
          <img src="../../images/indexNav/chengxinbi.png" alt="" />
          <p>橙信币</p>
        </div>
      </div>
      <!-- 轮播图 -->
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item v-for="item in imgs" :key="item">
          <img src="../../images/indexNav/banner图8 1.png" alt="" />
        </van-swipe-item>
      </van-swipe>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      imgs: ["../../images/banner图8 1.png"],
    };
  },
};
</script>
<style lang="scss" scoped>
.my-swipe .van-swipe-item {
  color: #fff;
  text-align: center;
  margin-top: 50px;
  img {
    width: 670px;
    height: 310px;
    border-radius: 20px;
  }
}
.header {
  width: 100%;
  height: 540px;
  background: linear-gradient(
    to bottom,
    rgba(255, 159, 10, 1),
    rgba(255, 187, 81, 0.56),
    rgba(255, 254, 253, 0)
  );
  overflow: hidden;
  .select {
    box-sizing: border-box;
    margin-top: 88px;
    height: 88px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 34px;
    align-items: center;
    // position: relative;
    .location {
      img {
        width: 46px;
        height: 46px;
        vertical-align: middle;
      }
      span {
        color: white;
        vertical-align: middle;
        font-size: 40px;
      }
    }
    input {
      width: 330px;
      height: 40px;
      border: 1px solid #fff;
      text-align: center;
      font-size: 22px;
      color: white;
      background-color: rgba(0, 0, 0, 0);
      border-radius: 10px;
    }
    & > img {
      position: absolute;
      left: 518px;
      top: 118px;
      height: 28px;
      width: 28px;
    }
    .coin {
      height: 88px;
      text-align: center;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      img {
        height: 56px;
        width: 56px;
      }
      p {
        font-size: 26px;
        color: white;
      }
    }
  }
}
</style>
